<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>月销售统计
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" style="margin-bottom: 30px">
        <span class="demonstration">月份：</span>
        <el-date-picker
            v-model="query.date"
            value-format="yyyy-MM"
            format="yyyy-MM"
            type="month"

            placeholder="选择月">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch" style="margin-left: 15px">搜索</el-button>
      </div>
      <div>
        <div style="display: inline-block;width: 65%;height: 100%">
          <BaseECharts width="100%" height="500px" :options="options" ref="echarts" />
        </div>
        <div style="display: inline-block;width: 35%;height: 100%">
          <BaseECharts width="100%" height="500px" :options="options2" ref="echarts2" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseECharts from "./BaseECharts";
import {
  getReportDataByMonth,
  getReportDataByMonthCancel,
  getReportDataByMonthPay,
  getReportDataByMonthPIE
} from '../../api/index';
export default {
  name: "MonthCharts",
  components: {BaseECharts},
  data(){
    return {
      query: {
        date: '',
      },
      options: {
        title: {
          text: '销售趋势图',
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['交易成功', '交易取消', '待完成']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [2,5,3,89,8,6,8]
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '交易成功',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '交易取消',
            type: 'line',
            stack: 'Total',
            data: []
          },
          {
            name: '待完成',
            type: 'line',
            stack: 'Total',
            data: []
          },
        ]
      },
      options2:{
        title: {
          text: '销售饼图',
          subtext: '百分占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getData();
    this.handleSearch();
  },
  methods: {
    getData(){
      // 获取当前年月
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };
      let newmonth = date.month > 10 ? date.month : "0" + date.month;
      // 我需要的时间格式为 "yyyy-MM-dd HH:mm:ss" 有不一样的自己拼别的，都是字符串拼接
      var newTime =
          date.year +
          "-" +
          newmonth;
      this.query.date = newTime;
    },
    handleSearch(){
      var createTimes = [];
      var payments1 = [];
      var payments2 = [];
      var payments3 = [];
      getReportDataByMonth(this.query).then(res => {
        res.data.forEach(item=>{
          createTimes.push(item.createTime)
          payments1.push(item.payment)
        })
        this.options.series[0].data = payments1;
      });
      getReportDataByMonthCancel(this.query).then(res => {
        res.data.forEach(item=>{
          payments2.push(item.payment)
        })
        this.options.series[1].data = payments2;
      });
      getReportDataByMonthPay(this.query).then(res => {
        res.data.forEach(item=>{
          payments3.push(item.payment)
        })
        this.options.series[2].data = payments3;
      });
      getReportDataByMonthPIE(this.query).then(res => {
        this.options2.series[0].data = res.data;
      });
      this.options.xAxis.data = createTimes;
    }
  }
}
</script>

<style scoped>

</style>